<template>
    <a-card
      title="新增子商品"
      :maskClosable="false"
      width=1150
      placement="right"
      :closable="false"
      style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
      <a-form :form="form">
        <a-tabs defaultActiveKey="1">
          <!--子商品信息-->
          <a-tab-pane tab="子商品信息" key="1">
            <merchandise-news :mab.sync="mabFile"></merchandise-news>
          </a-tab-pane>
          <!--图片与视频-->
          <a-tab-pane tab="图片与视频" key="2">
            <img-video :mab4.sync="mabFile.mab04" :fileListM.sync="fileListMmab"></img-video>
          </a-tab-pane>
        </a-tabs>
      </a-form>
      <div class="drawer-bootom-button">
        <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">取消</a-button>
        </a-popconfirm>
        <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
      </div>
    </a-card>
</template>
<script>

import db from 'utils/localstorage'
import GlobalVariable from '../../common/global_variable'
import MerchandiseNews from './components/News'
import ImgVideo from './components/Img'

let user = db.get('USER')
let username = user.username
export default {
  components: {
    MerchandiseNews,
    ImgVideo
  },
  name: 'MabFileAddForm',
  props: {
    addVisiable: {
      default: false
    }
  },
  data () {
    return {
      mabFile: {
        mab01: '',
        mab02: '',
        mab03: '',
        mab04: '',
        name: '',
        mab05: '',
        mab06: '',
        mab07: '',
        mab08: '',
        mab10: '',
        mab11: '',
        mab13: '',
        mab15: '',
        mab12: '',
        mab14: '',
        mab16: '',
        mab17: '',
        mab18: '',
        mab19: '',
        mabacti: 'Y'
      },
      fileListMmab: [],
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      loading: false,
      form: this.$form.createForm(this),
      checkedKeys: [],
      expandedKeys: []
    }
  },
  methods: {
    reset () {
      this.loading = false
      this.expandedKeys = this.checkedKeys = []
      this.mabFile = {}
      this.fileListMmab.splice(this.fileListMmab.indexOf(0), 1)
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (this.mabFile.mab02 === '') {
          this.$message.error('请输入子供应商')
          return false
        }
        if (this.mabFile.mab04 === '') {
          this.$message.error('请上传子产品主图')
          return false
        }
        if (!err) {
          this.loading = true
          console.log(this.mabFile)
          this.$api.goods.postMab(this.mabFile).then((r) => {
            this.reset()
            this.$emit('success')
            this.$message.success('新增子商品成功')
            this.$router.go(-1)
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
